<template>
	<view>
		<movable-area :style="{height: `${movableStyle.height}px`,width: `${movableStyle.width}px`}" 
        @touchstart="onTap" 
        @touchend="touchend" 
        @tap="onTap">
			<movable-view v-if="!isSwitch" :x="x" :y="y"
				 direction="all"
				@change="onChange">
                <view class="addordericon" @click="$navto('/pages/produce/daily_add')">
                    <view class="tt">
                        上传
                    </view>    
                    <view class="tt">
                        日报
                    </view>    
                </view>
			</movable-view>
		</movable-area>

        
	</view>
</template>

<script>
	/**
	 * icon 图标，需要组件uview-icons
	 * url 跳转地址
	 * selected 默认选中
	 * label  提示
	 * size 大小
	 */
	export default {
		name: 'Daily',
		data() {
			return {
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				top: 0,
				left: 0,
				modile: {},
				oldLeft: 0,
				oldTop: 0,
				//按钮颜色
				toggleIconColor: "#000000",
				//按钮大小
				toggleIconSize: 50,
				menuStyle: {
					height: '50px',
					width: '50px'
				},
				toggleStyle: {
					height: 40,
					width: 40,
				},

				indicatorStyle: {
					transform: ''
				},
				movableStyle: {
					height: 1300,
					width: 100

				},
				isSwitch: false,
				disSelectedLi: '',
				selectedLi: '',
				menuList: '',
                list:[]
			}
		},
	
		mounted() {
		
		},
		created() {
			let _this = this;
			_this.modile = uni.getSystemInfoSync();

			_this.movableStyle.width = _this.modile.windowWidth
			_this.movableStyle.height = 800
			_this.top = _this.modile.safeArea.top;
			_this.left = _this.modile.safeArea.left ;
			_this.y = 400;
			_this.x = _this.modile.windowWidth;
			_this.old.y = 400;
			_this.old.x = _this.modile.safeArea.left;
		},
		computed: {
			//只做占位
			aStyle() {
				const style = {}
				style.transform = 'rotate(calc(360deg / -' + this.menuList.length + ' * var(--i)))';
				return style;
			},
		},
		watch: {
			menuList(val) {}
		},
		methods: {
            add(){
                this.$emit('add')
            },
			//触摸开始，关闭侧滑
			onTap(){
				// #ifdef MP-TOUTIAO
				tt.setSwipeBackMode(0);
				// #endif
				// 单页面调用5+ Api
				// #ifdef APP-PLUS
				var page = this.$mp.page.$getAppWebview();
				page.setStyle({ popGesture: 'none' });
				// #endif
			},
			//触摸结束，开启侧滑
			touchend(e){
				let _this = this
				// #ifdef MP-TOUTIAO
				tt.setSwipeBackMode(1);
				// #endif
				// 单页面调用5+ Api
				// #ifdef APP-PLUS
				var page = this.$mp.page.$getAppWebview();
				page.setStyle({ popGesture: 'close' });
				// #endif
				//移动未操作，1s后吸附
				_this.x=_this.old.x
				_this.y=_this.old.y
				if(!_this.isSwitch) {
					// _this.finish()
				}
			},
			//拖动，坐标改变
			onChange: function(e) {
				let _this = this
				_this.old.x = e.detail.x
				_this.old.y = e.detail.y
			},
			//展开按钮
			toggle() {
				let _this = this
				if (_this.isSwitch) { //展开 =>>关闭
					_this.left = _this.old.x
					_this.top = _this.old.y
					_this.x = _this.old.x
					_this.y = _this.old.y
					_this.menuStyle.width = '0px'
					_this.menuStyle.height = '0px'
					_this.toggleStyle.width = 40
					_this.toggleStyle.height = 40
					_this.toggleIconSize = '50'
					_this.toggleIconColor = "#000000"
					_this.isSwitch = false
					_this.finish()
				} else { //关闭 =>>展开
					_this.left = 55
					_this.top = 150
					_this.menuStyle.width = '300px'
					_this.menuStyle.height = '300px'
					_this.toggleStyle.width = 75
					_this.toggleStyle.height = 75
					_this.toggleIconSize = '70'
					_this.toggleIconColor = "#FFFFFF"
					_this.isSwitch = true
				}

			},
			//选中按钮操作
			activeLink(obj) {
				let _this = this
				for (let i = 0; i < _this.menuList.length; i++) {
					if (obj == i) {
						_this.menuList[i].selected = true
					} else {
						_this.menuList[i].selected = false
					}

				}
				//圆圈转的角度
				let rotate = 360 / _this.menuList.length * obj
				_this.indicatorStyle.transform = 'translatex(-103px) rotate(' + rotate + 'deg)'
				// 600ms后触发回调
				_this.timers = setTimeout(() => {
					uni.switchTab({
						url:_this.menuList[obj].url
					})
					clearTimeout(_this.timers);
				}, 600);
			},

			finish() {
				let _this = this;
				if (_this.x == 0) {
					return
				}
				let timer = setTimeout(() => {
					_this.x = 0
					clearTimeout(timer)
				}, 1000)
			},
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #222327;
		min-height: 100vh;
	}

	.menu {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu .toggle {
		position: absolute;
		background: rgba(0, 0, 0, 0);
		color: #222327;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3em;
		cursor: pointer;
		transition: 0s;
	}

	.menu .toggle.active {
		transform: rotate(315deg);
		box-shadow: 0 0 0 68px #f1f1f1;
		background: #222327;
		color: #fff;
	}

	/deep/ .menu .toggle.active .uni-icons.uniui-plusempty {
		color: #fff !important;
	}

	.menu li {
		position: absolute;
		left: 10px;
		list-style: none;
		transform-origin: 140px;
		visibility: hidden;
		opacity: 0;
		transition: 0.5s;
		z-index: 10;
	}

	.menu.active li {
		visibility: visible;
		opacity: 1;
	}

	.menu li a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 55px;
		height: 55px;
		font-size: 1.75em;
		color: #222327;
		border-radius: 50%;
		text-decoration: none;
	}


	.indicator {
		position: absolute;
		left: calc(50% + 0px);
		width: 100px;
		height: 1px;
		/* background: red; */
		pointer-events: none;
		transition: 0.5s;
		transform-origin: right;
	}

	.indicator::before {
		content: '';
		position: absolute;
		top: -27.5px;
		left: 72px;
		width: 55px;
		height: 55px;
		background: #222327;
		box-shadow: 0 0 0 6px #29fd53;
		border-radius: 50%;
		transition: 0.5s;
		opacity: 0;
	}

	.menu.active .indicator::before {
		opacity: 1;
		top: -27.5px;
		left: -27.5px;
		background: #29fd53;
		box-shadow: 0 0 0 6px #222327;
	}


	.fixed-box {
		pointer-events: none; // 这里是重点，盒子可穿透操作
		position: fixed;
		z-index: 100000;
		transition: left 2s, transform 2s;
		-webkit-transition: left 1s, -webkit-transform 1s;
		/* Safari */
	}

	.fixed-button {
		pointer-events: auto;
		width: max-content;
		height: auto;
		overflow: hidden;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	movable-view {
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		height: 90rpx;
		width: 90rpx;
		background-color: #52A0F3;
		color: #fff;
        text-align: center;
        font-size: 24rpx;
	}

	movable-area {
		pointer-events: none;
		position: fixed;
		z-index: 100000;
		top: 30px;
		background-color: rgba(0, 0, 0, 0);
		overflow: hidden;
	}

    .addordericon .tt{
        line-height: 28rpx;
    }
</style>
